<template>


  <div>
<!--    <remote-css href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"></remote-css>-->
        <remote-css href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.11.2/css/all.min.css"></remote-css>
    <div ref="sc-bottom-bar" class="sc-bottom-bar">

      <a ref="index_1" class="sc-menu-item">
        <i class="fas fa-list"@click="$router.push({path:'index_1',replace:true})"></i>

      </a>

<!--      这个是current-->
      <a  class="sc-menu-item sc-current">
        <i ref="index_2" class="fas fa-plus" @click="$router.push({path:'index_2',replace:true})"></i>
      </a>
      <a ref="sc_nav_indicator" class="sc-nav-indicator">
      </a>
      <a ref="index_3" class="sc-menu-item">
        <i class="fas fa-calendar-alt" @click="checkIsLogin"></i>
      </a>

    </div>
  </div>



</template>

<script>
import {MessageBox} from "element-ui";
import {getToken} from "@/utils/auth";
import Vue from "vue";

let menu_bar;
let menu_item;
let menu_indicator;
let menu_current_item;
let menu_position;



export default {
  name: "bottom",
  components: {
    'remote-css': {
      render(createElement) {
        return createElement('link', {attrs: {rel: 'stylesheet', href: this.href}});//创建一个元素
      },
      props: {
        href: {type: String, required: true},
      },
    }
  },
  computed:{
    initial({context})
    {
      menu_bar = document.querySelector('.sc-bottom-bar');
      menu_item = document.querySelectorAll('.sc-menu-item');
      menu_indicator = document.querySelector('.sc-nav-indicator');
      menu_current_item = document.querySelector('.sc-current');
      menu_position = menu_current_item.offsetLeft - 16.3;
      menu_indicator.style.left = menu_position + "px";
      menu_bar.style.backgroundPosition = menu_position-8 + 'px';
      menu_item.forEach(
          function(select_menu_item){
            select_menu_item.addEventListener('click', function(e){
              e.preventDefault();
              menu_position = this.offsetLeft - 16;
              menu_indicator.style.left = menu_position + "px";
              menu_bar.style.backgroundPosition = menu_position-8 + 'px';
              [...select_menu_item.parentElement.children].forEach(
                  sibling => {
                    sibling.classList.remove('sc-current');
                  })
              select_menu_item.classList.add('sc-current');
            });
          }
      )
    }
  },
  methods :{
      checkIsLogin()
      {

        if(getToken()!=null)this.$router.push({path:'index_3',replace:true})
        else
        {

          MessageBox.confirm(
              '你当前未登陆，请登陆',
              '确定登陆',
              {
                confirmButtonText: '登录',
                cancelButtonText: '取消',
                type: 'warning'
              }
          ).then(() => {
            //好家伙，通信贼好用！！！
            const  emiter = new Vue()
            emiter.$bus.$emit("changeSome",true)
          })
        }

        if (this.$route.path==='/index/index_1')
        {
          this.$refs.index_1.click();
        }
        if (this.$route.path==='/index/index_2')
        {
          // console.log("click index_2")
          this.timer = setTimeout(()=>{   //设置延迟执行
            this.$refs.index_2.click();
          },100);

        }
        if (this.$route.path==='/index/index_3')
        {
          this.timer = setTimeout(()=>{   //设置延迟执行
            this.$refs.index_3.click();
          },100);

        }



      }
  },

  mounted() {
    this.initial;

    // console.log(this.$route.path);
    if (this.$route.path==='/index/index_1')
    {
      this.$refs.index_1.click();
    }
    if (this.$route.path==='/index/index_2')
    {
      // console.log("click index_2")
      this.timer = setTimeout(()=>{   //设置延迟执行
        this.$refs.index_2.click();
      },100);

    }
    if (this.$route.path==='/index/index_3')
    {
      this.timer = setTimeout(()=>{   //设置延迟执行
        this.$refs.index_3.click();
      },100);

    }


  }
}
</script>

<style scoped>
@import "static/css/style.css";
</style>
